<template>
  <div class="min-h-screen bg-gray-50">
    <!-- 返回按钮 -->
    <div class="bg-white shadow-sm">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
        <ULink to="/user/register" class="inline-flex items-center text-gray-600 hover:text-primary-600">
          <UIcon name="i-heroicons-arrow-left" class="h-5 w-5 mr-1" />
          <span>返回注册</span>
        </ULink>
      </div>
    </div>

    <!-- 页面内容 -->
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
      <div class="bg-white rounded-xl shadow-sm overflow-hidden">
        <!-- 标签页 -->
        <div class="border-b border-gray-200">
          <div class="flex -mb-px">
            <button 
              v-for="tab in tabs" 
              :key="tab.id"
              @click="activeTab = tab.id"
              :class="[
                'flex-1 py-4 px-1 text-center border-b-2 font-medium text-sm',
                activeTab === tab.id
                  ? 'border-primary-500 text-primary-600'
                  : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
              ]"
            >
              <div class="flex items-center justify-center">
                <UIcon :name="tab.icon" class="h-5 w-5 mr-2" />
                {{ tab.name }}
              </div>
            </button>
          </div>
        </div>

        <!-- 内容区域 -->
        <div class="p-6">
          <!-- 服务条款 -->
          <div v-if="activeTab === 'terms'" class="prose max-w-none">
            <h1 class="text-2xl font-bold text-gray-900 mb-6">服务条款</h1>
            
            <div class="space-y-6">
              <section>
                <h2 class="text-xl font-semibold text-gray-800">1. 接受条款</h2>
                <p class="text-gray-600">欢迎使用维扣图元（以下简称"本服务"）。本服务由维扣图元团队（以下简称"我们"）提供。通过访问或使用我们的网站、服务或应用程序，您同意受本服务条款的约束。如果您不同意这些条款，请勿使用本服务。</p>
              </section>
              
              <section>
                <h2 class="text-xl font-semibold text-gray-800">2. 服务描述</h2>
                <p class="text-gray-600">维扣图元是一个摄影作品分享和社区平台，允许用户上传、分享、浏览和下载摄影作品。我们提供工具和服务，帮助用户展示和发现优质摄影内容。</p>
              </section>
              
              <section>
                <h2 class="text-xl font-semibold text-gray-800">3. 用户账户</h2>
                <p class="text-gray-600">使用本服务可能需要创建账户。您负责维护您账户的保密性，并对发生在您账户下的所有活动负责。您同意立即通知我们任何未经授权使用您账户的情况。</p>
                <p class="text-gray-600 mt-2">我们保留在我们自行决定的情况下，拒绝服务、终止账户、删除或编辑内容的权利，恕不另行通知。</p>
              </section>
              
              <section>
                <h2 class="text-xl font-semibold text-gray-800">4. 用户内容</h2>
                <p class="text-gray-600">您可以在我们的平台上发布内容，包括但不限于照片、评论和个人信息。您保留您内容的所有权利，但授予我们非独占、免版税、可转让的许可，允许我们使用、复制、修改、改编、出版、翻译和分发您的内容。</p>
                <p class="text-gray-600 mt-2">您同意不会上传、发布或分享任何侵犯他人知识产权、违反法律法规或包含不适当内容的材料。</p>
              </section>
              
              <section>
                <h2 class="text-xl font-semibold text-gray-800">5. 知识产权</h2>
                <p class="text-gray-600">本服务及其原始内容、功能和设计受国际版权、商标、专利、商业秘密和其他知识产权或专有权利法律的保护。</p>
              </section>
              
              <section>
                <h2 class="text-xl font-semibold text-gray-800">6. 终止</h2>
                <p class="text-gray-600">我们可以因任何原因终止或暂停您对服务的访问，恕不另行通知，包括但不限于您违反这些条款。</p>
              </section>
              
              <section>
                <h2 class="text-xl font-semibold text-gray-800">7. 免责声明</h2>
                <p class="text-gray-600">本服务按"原样"和"可用"的基础提供，不提供任何明示或暗示的保证。我们不保证服务将不间断、及时、安全或无错误。</p>
              </section>
              
              <section>
                <h2 class="text-xl font-semibold text-gray-800">8. 责任限制</h2>
                <p class="text-gray-600">在任何情况下，我们对因使用或无法使用本服务而导致的任何损失或损害不承担责任。</p>
              </section>
              
              <section>
                <h2 class="text-xl font-semibold text-gray-800">9. 条款变更</h2>
                <p class="text-gray-600">我们保留随时修改或替换这些条款的权利。如有重大变更，我们将尽力提前通知。您继续使用本服务将视为接受修改后的条款。</p>
              </section>
              
              <section>
                <h2 class="text-xl font-semibold text-gray-800">10. 联系我们</h2>
                <p class="text-gray-600">如果您对这些条款有任何疑问，请联系我们：support@wecho.com</p>
              </section>
            </div>
          </div>
          
          <!-- 隐私政策 -->
          <div v-if="activeTab === 'privacy'" class="prose max-w-none">
            <h1 class="text-2xl font-bold text-gray-900 mb-6">隐私政策</h1>
            
            <div class="space-y-6">
              <section>
                <h2 class="text-xl font-semibold text-gray-800">1. 信息收集</h2>
                <p class="text-gray-600">我们收集的信息类型包括：</p>
                <ul class="list-disc pl-6 text-gray-600 mt-2">
                  <li>您提供给我们的信息：如注册信息、个人资料、上传的内容等。</li>
                  <li>自动收集的信息：如设备信息、IP地址、浏览器类型、访问时间等。</li>
                  <li>来自第三方的信息：如您选择使用第三方登录时，我们可能接收相关信息。</li>
                </ul>
              </section>
              
              <section>
                <h2 class="text-xl font-semibold text-gray-800">2. 信息使用</h2>
                <p class="text-gray-600">我们使用收集的信息：</p>
                <ul class="list-disc pl-6 text-gray-600 mt-2">
                  <li>提供、维护和改进我们的服务。</li>
                  <li>处理交易并发送相关通知。</li>
                  <li>发送服务通知和更新。</li>
                  <li>回应您的评论和问题，提供客户支持。</li>
                  <li>监控和分析趋势、使用情况和活动。</li>
                  <li>个性化和改进您的体验。</li>
                </ul>
              </section>
              
              <section>
                <h2 class="text-xl font-semibold text-gray-800">3. 信息共享</h2>
                <p class="text-gray-600">我们不会出售或出租您的个人信息给第三方。我们可能在以下情况下共享您的信息：</p>
                <ul class="list-disc pl-6 text-gray-600 mt-2">
                  <li>经您同意或按您的指示。</li>
                  <li>与提供服务的供应商和合作伙伴共享。</li>
                  <li>遵守法律要求、保护我们的权利或防止欺诈。</li>
                  <li>在业务转让（如合并、收购或资产出售）的情况下。</li>
                </ul>
              </section>
              
              <section>
                <h2 class="text-xl font-semibold text-gray-800">4. 数据安全</h2>
                <p class="text-gray-600">我们采取合理措施保护您的个人信息不被未经授权的访问、使用或披露。然而，没有任何互联网传输或电子存储方法是100%安全的。</p>
              </section>
              
              <section>
                <h2 class="text-xl font-semibold text-gray-800">5. 您的权利</h2>
                <p class="text-gray-600">您有权：</p>
                <ul class="list-disc pl-6 text-gray-600 mt-2">
                  <li>访问、更正或删除您的个人信息。</li>
                  <li>限制或反对我们处理您的数据。</li>
                  <li>数据可携带性（在技术可行的情况下）。</li>
                  <li>撤回同意（如适用）。</li>
                </ul>
              </section>
              
              <section>
                <h2 class="text-xl font-semibold text-gray-800">6. Cookie政策</h2>
                <p class="text-gray-600">我们使用Cookie和类似技术来收集和使用有关您的信息。Cookie是小型文本文件，当您访问网站时存储在您的设备上。我们使用Cookie来记住您的偏好、了解使用模式并改进服务。</p>
              </section>
              
              <section>
                <h2 class="text-xl font-semibold text-gray-800">7. 儿童隐私</h2>
                <p class="text-gray-600">我们的服务不面向13岁以下的儿童。我们不会故意收集13岁以下儿童的个人信息。如果您发现我们可能收集了13岁以下儿童的信息，请联系我们，我们将采取措施删除这些信息。</p>
              </section>
              
              <section>
                <h2 class="text-xl font-semibold text-gray-800">8. 隐私政策变更</h2>
                <p class="text-gray-600">我们可能会不时更新我们的隐私政策。我们会通过在此页面上发布新的隐私政策来通知您任何变更。建议您定期查看此隐私政策以了解任何变更。</p>
              </section>
              
              <section>
                <h2 class="text-xl font-semibold text-gray-800">9. 联系我们</h2>
                <p class="text-gray-600">如果您对我们的隐私政策有任何疑问，请联系我们：privacy@wecho.com</p>
              </section>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// 标签页数据
const tabs = [
  { id: 'terms', name: '服务条款', icon: 'i-heroicons-document-text' },
  { id: 'privacy', name: '隐私政策', icon: 'i-heroicons-shield-check' }
]

// 当前激活的标签
const activeTab = ref('terms')
</script>